<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe
      :autoplay="3000"
      class="my-swipe"
      indicator-color="white"
    >
      <!-- 图片懒加载 -->
      <van-swipe-item
        v-for="el in swipers"
        :key="el.id"
      >
        <img v-lazy="el.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid :column-num="3">
      <van-grid-item
        v-for="el in grids"
        :to="el.to"
        :key="el.id"
        :icon="el.src"
        :text="el.title"
      />
    </van-grid>
  </div>
</template>
<script>
import { swiper, grids } from '../../api/home'
export default {
  data: () => ({
    swipers: [],
    grids: []
  }),
  created() {
    this.getSwiper()
    this.getgrids()
  },
  methods: {
    async getSwiper() {
      const res = await swiper()
      this.swipers = res.data.message
    },
    async getgrids() {
      const res = await grids()
      this.grids = res.data.message
    }
  }
}
</script>
<style lang="less" >
.home {
  .my-swipe .van-swipe-item {
    height: 200px;
    line-height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item__icon {
    font-size: 40px;
  }
}
</style>